<template>
  <div v-loading="loading">
   
     <div class="pl20 pr20 mt10 relative" style="background:#fff">
            <br/>
    <table>
        <thead>
            <th  width="7%">商品序号</th>
            <th>商品图片</th>
             <th>商品名称</th>
            <th  width="5%">商品积分</th>
            <th width="10%">
             <el-select v-model="shop_angent" placeholder="经纪商" size="mini" @change="changeAngent">
                <el-option label="全部" value=""></el-option>
                <el-option 
                v-for="item of getAngents"
                :key="item.key"
                :label="item.name"
                :value="item.key"
               ></el-option>
            </el-select>
            </th>
            <th  width="10%">
            <el-select v-model="shop_status" placeholder="" size="mini" @change="changeStatus">
                <el-option label="全部" value=""></el-option>
                <el-option label="下架" value="0"></el-option>
                <el-option label="上架" value="1"></el-option>
            </el-select>

            </th>
            <th  width="5%">商品类型</th>
            <th  width="5%">已售件数</th>
            <th>发布时间</th>
            <!-- <th>商品简介</th> -->
            <th  width="5%">操作</th>
        </thead>

        <tbody>
            <template v-for="item of tableData">
            <tr :key="item.id">
                <td class="tc"><a href="javascript:;" class="color-00aeff" @click="$router.push({name:'menu_shop_details',query:{id:item.id}})">{{item.goods_num}}</a> 
                </td>
                <td width="100px" class="tc"><img :src="item.img_url" alt="" width="50" height="50"></td>
                 <td  width="300px">{{item.name}}</td>
                <td>{{item.integral}}</td>
                <td>{{item.agent_num | filterAgent}}</td>
                <td>{{item.status==0?'下架':'上架'}}</td>
                <td>{{item.type==0?'实物':'虚拟'}}</td>
                <td>{{item.sale_count}}</td>
                <td width="150px">{{item.	publish_time}}</td>
                <!-- <td v-html="item.simple_desc" class="desc_simple"></td> -->
               
                <td class="tc">
                    <el-button type="text" @click="updateGoodInfo(item)">
                        {{item.status==0?'上架':'下架'}}
                    </el-button>
                </td>
            </tr>
            </template>
        </tbody>
    </table>


 <page-pagination 
      v-on:pageFun="pageFunNumber" 
      :page="page" 
      :pageSize="pageSize" 
      :total="total">
    </page-pagination>



    </div>

  </div>

</template>

<style scoped>
.el-table__body {
  /* width: 99%!important; */
  table-layout: inherit !important;
}
table {
  width: 100%;
  border-collapse: collapse;
  empty-cells: show;
}
thead th,
tbody td {
  border: 1px solid #dfdede;
  padding: 5px;
  color: #4e4d4d;
}
thead th {
  text-align: center;
  font-size: 14px;
}
.desc_simple img{
  width: 100px!important;
  height: 100px!important;
}
</style>


<script>
import pagePagination from "@/components/Common/pagePagination";
import { mapGetters } from "vuex";
import server from "@/service/index_c";
export default {
  components:{
    pagePagination
  },
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [],
      shop_angent: "",
      shop_status: "",
    };
  },
  created() {
    this.$store.dispatch("setAllAngentLists",'officel');
   
  },
  mounted() {
    this.queryServerRolesList();
  },
   computed: {
    ...mapGetters({
      getAngents: "getAllAngentLists"
    })
  },
  methods: {
    changeAngent() {
      this.queryServerRolesList();
    },
    changeStatus() {
      this.queryServerRolesList();
    },
   
    async updateGoodInfo(item) {
      this.$confirm(
        `您确定要${item.status == 0 ? "上架" : "下架"}该条数据吗`,
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          lockScroll: false
        }
      )
        .then(() => {
          this.changeGoodsStatus(item);
        })
        .catch(e => {});
    },
    async changeGoodsStatus(item) {
      let status = item.status == 0 ? "1" : "0";
      let res = await server.haiheiQueryShopingUpAndDownStatus({
        id: item.id,
        status: status
      });
      if (res.success) {
        item.status = status;
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    },
    //分页
    pageFunNumber(page) {
    
      this.queryServerRolesList(page);
    },
    // 查询列表
    async queryServerRolesList(page = 1) {
       this.loading = true;
      let res = await server.haiheiQueryShopingInfo({
        page: page,
        pageSize: this.pageSize,
        agent_num: this.shop_angent,
        status: this.shop_status
      });
      if (res.success) {
        this.loading = false;
        this.tableData = res.result.pageList;
        this.total = res.result.nums;
        this.page = res.result.page;
        this.pageSize = res.result.pageSize;
      } else {
        this.$message({
          type: "error",
          message: res.msg
        });
      }
    }
  }
};
</script>
